<template>
  <div class="login-container">
    <el-card>
      <el-image style="width: 200px" :src="logo" fit="fill"></el-image>
      <el-form label-width="70px" :model="form" ref="loginForm" :rules="rules">
        <el-form-item label="用户名" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            v-model="form.code"
            autocomplete="off"
            placeholder="请输入验证码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="check">
            我已阅读并同意「用户协议」和「隐私条款」
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="_onSubmit">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 协议同意提问 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <span>
        若继续登录则默认您已同意“阅读并同意「用户协议」和「隐私条款」”
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allowSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import logo from '@/assets/images/logo_index.png'
import { login } from '@/api/user'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')

export default {
  name: 'LoginPage',
  // props: {},
  // components: {},
  data() {
    // 表单校验：手机号格式
    const mobileValidator = (rule, value, callback) => {
      if (
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          value
        )
      ) {
        callback()
      } else {
        callback(new Error('请输入正确手机号格式'))
      }
    }
    // // 表单校验：验证码格式
    const codeValidator = (rule, value, callback) => {
      if (/^\d{6}$/.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正确验证码格式'))
      }
    }
    return {
      logo, // logo 图
      form: {
        mobile: '13911111111',
        code: '246810',
      },
      check: false,
      // 表单校验
      rules: {
        mobile: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          {
            validator: mobileValidator,
            trigger: 'blur',
          },
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { len: 6, message: '验证码为6个数字字符', trigger: 'blur' },
          {
            validator: codeValidator,
            trigger: 'blur',
          },
        ],
      },
      dialogVisible: false, // 是否同意协议的对话框
      returnUrl: '', // 跳转来的 url
    }
  },
  // computed: {},
  // watch: {},
  // 钩子函数
  created() {
    this.returnUrl = this.$route.query?.returnUrl
  },
  methods: {
    ...mapMutations(['setToken', 'setRefreshToken']),
    // 提交表单
    _onSubmit() {
      if (!this.check) {
        return (this.dialogVisible = true)
      }
      this.$refs.loginForm.validate(async valid => {
        // console.log('校验结果', valid)
        if (valid) {
          const [err, res] = await login(this.form)
          if (err) return this.$message.error(err.response.data.message)
          const {
            data: { token, refresh_token },
          } = res
          this.$message({
            message: '登录成功！',
            type: 'success',
          })
          this.setToken(token)
          this.setRefreshToken(refresh_token)
          if (this.returnUrl) return this.$router.push({ path: this.returnUrl })
          this.$router.push({ name: 'home' })
        }
      })
    },
    // 是否同意 隐私协议的弹窗
    allowSure() {
      this.dialogVisible = false
      this.check = true
    },
  },
}
</script>

<style scoped lang="scss">
.login-container {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/images/login_bg.jpg) no-repeat center center/cover;
  .el-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 440px;
    height: 380px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    ::v-deep .el-card__body {
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-form {
        width: 100%;
        margin-top: 20px;
      }
    }
  }
}
</style>
